import React from 'react';
import { Play, Pause, RefreshCw, Search, User } from 'lucide-react';

interface HeaderProps {
  isRunning: boolean;
  onToggleStream: () => void;
  onRefresh: () => void;
  searchTerm: string;
  onSearchChange: (term: string) => void;
}

export const Header: React.FC<HeaderProps> = ({
  isRunning,
  onToggleStream,
  onRefresh,
  searchTerm,
  onSearchChange
}) => {
  return (
    <header className="h-[60px] glass-effect border-b border-border-color flex items-center justify-between px-6">
      <div className="flex items-center gap-4">
        <button
          onClick={onToggleStream}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
            isRunning
              ? 'bg-error-red hover:bg-red-600'
              : 'bg-accent-blue hover:bg-blue-600'
          }`}
        >
          {isRunning ? <Pause size={16} /> : <Play size={16} />}
          {isRunning ? '暂停' : '启动'}
        </button>

        <button
          onClick={onRefresh}
          className="flex items-center gap-2 px-4 py-2 bg-secondary-bg hover:bg-secondary-bg/80 rounded-lg transition-all border border-border-color"
        >
          <RefreshCw size={16} />
          刷新
        </button>
      </div>

      <div className="flex items-center gap-4">
        <div className="relative">
          <Search
            size={16}
            className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"
          />
          <input
            type="text"
            placeholder="搜索服务器/标签/区域..."
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-10 pr-4 py-2 bg-secondary-bg border border-border-color rounded-lg text-text-primary placeholder-text-secondary focus:outline-none focus:border-accent-blue w-64"
          />
        </div>

        <div className="flex items-center gap-2 px-4 py-2 bg-secondary-bg rounded-lg">
          <User size={16} className="text-text-secondary" />
          <span className="text-text-primary">Admin</span>
        </div>
      </div>
    </header>
  );
};